<template>
  <page-header-wrapper>
    <!-- 筛选条件 -->
    <div class="screen_conditions">
      <div class="conditions">
        <a-input placeholder="请输入搜索条件" />
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item v-for="(value, key) in menuList" :key="key" @click="menu = key"> {{ value }}</a-menu-item>
          </a-menu>
          <a-button class="menu_button">
            <span>{{ menuList[menu] }}</span> <span style="margin-left: 30px"><a-icon type="down" /></span>
          </a-button>
        </a-dropdown>
      </div>
      <div>
        <a-button type="primary" @click="subShow = !subShow">更多</a-button>
        <a-button type="primary" style="margin-left: 15px" @click="editData(1)">编辑1</a-button>
        <a-button type="primary" style="margin-left: 15px" @click="editData(2)">编辑2</a-button>
      </div>
    </div>
    <!-- 更多筛选条件 -->
    <transition name="sub-comments">
      <div v-if="subShow" class="tagList">
        <a-tag
          :color="item.isSelect ? '#108ee9' : 'cyan'"
          v-for="(item, index) in tagList"
          :key="index"
          style="margin-top: 5px; cursor: pointer"
          @click="changeTag(index)"
        >
          条件一
        </a-tag>
      </div>
    </transition>
    <!-- 表格 -->
    <div v-if="tableShow" class="table">
      <a-table :columns="columns" :data-source="tableList" :expandRowByClick="true" :pagination="pagination">
        <template slot="operation" slot-scope="text, record">
          <a-button
            @click="showDrawer"
            type="danger"
            style="background-color: #40a9ff; margin-right: 15px; border: none"
          >
            编辑
          </a-button>
          <a-button @click="record" type="danger"> 删除 </a-button>
        </template>
      </a-table>
      <div class="see_more" @click="tableListAdd" v-if="moreShow">查看更多</div>
      <div class="not_see_more" v-else>没有更多了</div>
    </div>
    <!-- 抽屉 -->
    <a-drawer
      title="编辑"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
    >
      <div class="flex">
        <p>姓名</p>
        <a-input></a-input>
      </div>
      <div class="flex">
        <p>电话</p>
        <a-input></a-input>
      </div>
      <div class="flex">
        <p>地址</p>
        <a-input></a-input>
      </div>
    </a-drawer>
    <!-- 弹出框 -->
    <div class="zhezhao" v-if="editShow" @click="onEditClose">
      <div class="eject">
        <div class="header">
          <a-button type="primary" @click.stop="save(1)">保存数据</a-button>
          <a-button type="primary" @click.stop="onEditClose">取消编辑</a-button>
        </div>
        <div id="luckysheet" class="luckysheet1" @click.stop></div>
      </div>
    </div>
    <!-- 弹出框抽屉 -->
    <a-drawer
      title="编辑数据"
      placement="right"
      width="86.5%"
      :closable="false"
      :visible="editVisible"
      @close="editDrawerClose"
    >
      <div class="shuju">
        <a-button type="primary" @click.stop="save(2)">保存数据</a-button>
        <a-button type="primary" style="margin-left:15px" @click.stop="editDrawerClose">取消编辑</a-button>
      </div>
      <div id="luckysheet" class="luckysheet2" @click.stop></div>
    </a-drawer>
  </page-header-wrapper>
</template>

<script>
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    width: 80
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    ellipsis: true
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    ellipsis: true
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    key: 'remarks',
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    ellipsis: true,
    scopedSlots: { customRender: 'operation' }
  }
]
// 映射
const mapping = {
  name: 0,
  age: 1,
  address: 2,
  phone: 3,
  remarks: 4,
  operation: 5,
  0: 'name',
  1: 'age',
  2: 'address',
  3: 'phone',
  4: 'remarks',
  5: 'operation'
}
const data = [
  {
    key: '1',
    name: '1',
    age: 32,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '2',
    name: '2',
    age: 42,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '3',
    name: '3',
    age: 32,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '4',
    name: '4',
    age: 32,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '5',
    name: '5',
    age: 42,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '6',
    name: '6',
    age: 32,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '7',
    name: '7',
    age: 32,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '8',
    name: '8',
    age: 42,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '9',
    name: '9',
    age: 32,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '10',
    name: '10',
    age: 32,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  },
  {
    key: '11',
    name: '11',
    age: 42,
    address: '南京市鼓楼区老学堂创意园L栋',
    phone: '132941426588',
    remarks: '无'
  }
]
export default {
  data () {
    return {
      subShow: false,
      tableShow: false,
      moreShow: true,
      visible: false,
      editVisible: false,
      editShow: false,
      tagList: [
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false },
        { name: '条件一', isSelect: false }
      ],
      menuList: { 0: '无', 1: '条件1', 2: '条件2', 3: '条件3aaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
      menu: 0,
      pagination: { defaultPageSize: 1000 }, // 默认每页条数
      data: [], // 第一此请求拿到的全部数据,
      tableList: [], // 页面表格展示数据
      columns, // 表头
      addNumber: 5, // 每次更多添加数据
      options: {
        container: 'luckysheet',
        title: '测试Excel', // 表 头名
        lang: 'zh', // 中文
        showtoolbar: true, // 是否显示工具栏
        showinfobar: false, // 是否显示顶部信息栏
        showsheetbar: true // 是否显示底部sheet按钮
      }
    }
  },
  created () {
    // 模拟一个请求拿到数据
    setTimeout(() => {
      this.data = data
      this.tableListAdd()
      this.tableShow = true
    }, 1000)
  },

  methods: {
    tableListAdd () {
      // 获得length
      const length = this.tableList.length
      // 根据newList判断数据是否获取完毕
      const newList = this.data.slice(length, length + this.addNumber)
      if (newList.length < this.addNumber) {
        this.moreShow = false
      }
      // 拼接tableList
      this.tableList = this.tableList.concat(newList)
    },
    changeTag (index) {
      this.tagList[index].isSelect = !this.tagList[index].isSelect
    },
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer () {
      this.visible = true
    },
    onClose () {
      this.visible = false
    },
    // 编辑
    editData (value) {
      const data = [
        {
          name: '表格',
          celldata: []
        }
      ]
      // 处理数据，插入表头
      columns.forEach((item, index) => {
        const celldataItem = {
          r: 0, // 行
          c: null, // 列
          v: null, // 值
          key: null //
        }
        celldataItem.c = index
        celldataItem.v = item.title
        celldataItem.key = item.key
        data[0].celldata.push(celldataItem)
      })

      // 插入正常数据
      this.tableList.forEach((item, index) => {
        for (const key in item) {
          const celldataItem = {
            r: index + 1, // 行
            c: null, // 列
            v: null, // 值
            key: null //
          }
          if (mapping[key] === 0 || mapping[key]) {
            celldataItem.c = mapping[key]
            celldataItem.v = item[key]
            celldataItem.key = key
            data[0].celldata.push(celldataItem)
          }
        }
      })
      // 判断是那个编辑
      value === 1 ? (this.editShow = true) : (this.editVisible = true)
      this.options.data = data
      setTimeout(() => {
        window.luckysheet.create(this.options)
      }, 100)
    },
    save (value) {
      const data = window.luckysheet.toJson().data[0].celldata
      const newData = []
      let dataItem = []
      // 根据行，将其改为数组(数组(对象))
      let r = 0
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        console.log(item.r, r)
        if (item.r === r) {
          dataItem.push(item)
          if (i === data.length - 1) {
            newData.push(dataItem)
          }
        } else {
          newData.push(dataItem)
          dataItem = []
          r = item.r
          i--
        }
      }
      newData.splice(0, 1)

      // 遍历newData替换原始数据
      for (let i = 0; i < newData.length; i++) {
        const newDataItem = newData[i]
        const item = {
          key: i,
          name: null,
          age: null,
          address: null,
          phone: null,
          remarks: null
        }
        for (let j = 0; j < newDataItem.length; j++) {
          if (mapping[newDataItem[j].c]) {
            switch (mapping[newDataItem[j].c]) {
              case 'name':
                item.name = newDataItem[j].v.m
                break
              case 'age':
                item.age = newDataItem[j].v.m
                break
              case 'address':
                item.address = newDataItem[j].v.m
                break
              case 'phone':
                item.phone = newDataItem[j].v.m
                break
              case 'remarks':
                item.remarks = newDataItem[j].v.m
                break
            }
          }
        }
        this.tableList.splice(i, 1, item)
      }
      console.log('this.tableList', this.tableList)
      this.$forceUpdate()
      value === 1 ? (this.editShow = false) : (this.editVisible = false)
    },
    onEditClose () {
      this.editShow = false
    },

    editDrawerClose () {
      this.editVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
// 筛选条件
.screen_conditions {
  display: flex;
  justify-content: space-between;
}
.conditions {
  display: flex;
}
.tagList {
  margin-top: 10px;
}
.menu_button {
  margin-left: 8px;
  // min-width: 150px;
  // display: flex;
  // justify-content: space-between;
  // line-height: 30px;
}
.sub-comments-leave-active,
.sub-comments-enter-active {
  transition: max-height 0.5s;
}
.sub-comments-enter,
.sub-comments-leave-to {
  max-height: 0;
}
.sub-comments-enter-to,
.sub-comments-leave {
  max-height: 250px;
}
// 表格
/deep/ .ant-table-pagination {
  display: none;
}
/deep/ .ant-table-body {
  background-color: #fff;
}
/deep/ .ant-drawer-body {
  height: 94%;
  padding: 15px;
}

.table {
  margin-top: 15px;
}
.see_more {
  background-color: #fafafa;
  text-align: center;
  color: #3391e0;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
}
.not_see_more {
  text-align: center;
  color: #bfbfcf;
  height: 50px;
  line-height: 50px;
}
// 抽屉
.flex {
  display: flex;
  margin-top: 20px;
  p {
    padding: 0;
    margin: 0;
    width: 40px;
    height: 32px;
    line-height: 32px;
  }
}
// 弹出框
.zhezhao {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  filter: alpha(opacity=50);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eject {
  position: relative;
  width: 60%;
  height: 80%;
  background-color: #fff;
  .header {
    height: 8%;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    .ant-btn {
      margin-left: 15px;
    }
  }
}
.luckysheet1 {
  width: calc(100% - 30px);
  margin-left: 15px;
  height: calc(92% - 15px);
}
.luckysheet2 {
  width: 100%;
  height: calc(99% - 25px);
}
.shuju {
  display: flex;
  align-items: center;
  .ant-btn {
    margin-bottom: 15px;
  }
}
</style>
